<template>
  <div></div>
</template>

<script setup>
import { onMounted, inject, onBeforeUnmount } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { DrawCircle, DrawLine, DrawPolygon, DrawRect } from '@antv/l7-draw'
const { map, scene } = inject('mapScene')
let route = useRoute()
let draw
onMounted(() => {
  let type = route.params.type
  initDraw(type)
})
//当路由变化的时候 要拿到最新的type值 从而完成绘图画笔的初始化
onBeforeRouteUpdate((to) => {
  let type = to.params.type
  initDraw(type)
})
function initDraw(type) {
  if (draw) {
    draw.destroy()
    draw.clear()
    draw = null
  }
  switch (type) {
    case 'line':
      {
        draw = new DrawLine(scene, {
          distanceOptions: {},
        })
      }
      break
    case 'rect':
      {
        draw = new DrawRect(scene, {
          areaOptions: {},
        })
      }
      break
    case 'polygon':
      {
        draw = new DrawPolygon(scene, {
          areaOptions: {},
        })
      }
      break
    case 'circle':
      {
        draw = new DrawCircle(scene, {
          areaOptions: {},
        })
      }
      break
  }
  draw.enable()
}
onBeforeUnmount(() => {
  if (draw) {
    draw.destroy()
    draw.clear()
    draw = null
  }
})
</script>

<style lang="scss" scoped></style>
